<template>
  <el-dialog title="详情"
             :close-on-click-modal="false" append-to-body
             :visible.sync="visible" class="jsbos-dialog jsbos-dialog_center" lock-scroll
             width="600px">
    <el-row :gutter="15" class="">
      <el-form ref="elForm" :model="dataForm" size="small"
               label-width="100px" label-position="right">
        <template v-if="!loading">
          <el-col :span="24">
            <el-form-item label="封面"
                          prop="jsbos_tems_course_jsbos_cover">
              <UploadImg v-model=" dataForm.jsbos_tems_course_jsbos_cover"
                         disabled
                         detailed :fileSize="5" sizeUnit="MB" :limit="9"
              </UploadImg>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="名称"
                          prop="jsbos_tems_course_jsbos_name">
              <p>{{ dataForm.jsbos_tems_course_jsbos_name }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="星级评分"
                          prop="jsbos_tems_course_jsbos_starScore">
              <p>{{ dataForm.jsbos_tems_course_jsbos_starScore }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="评分人数"
                          prop="jsbos_tems_course_jsbos_starUsers">
              <p>{{ dataForm.jsbos_tems_course_jsbos_starUsers }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学习人数"
                          prop="jsbos_tems_course_jsbos_learnUsers">
              <p>{{ dataForm.jsbos_tems_course_jsbos_learnUsers }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收藏数"
                          prop="jsbos_tems_course_jsbos_favoriteCount">
              <p>{{ dataForm.jsbos_tems_course_jsbos_favoriteCount }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学习进度"
                          prop="process">
              <p>{{ dataForm.process }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态"
                          prop="enabledMark">
              <p>{{ dataForm.enabledMark | dynamicText(enabledMarkOptions) }} </p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="讲师"
                          prop="jsbos_tems_course_jsbos_teacher">
              <p>{{ dataForm.jsbos_tems_course_jsbos_teacher }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否有考试"
                          prop="isHaveExam">
              <p>{{ dataForm.isHaveExam }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <el-form-item label="考试是否完成"
                          prop="isCompletedExam">
              <p>{{ dataForm.isCompletedExam }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否有作业"
                          prop="isHaveHomework">
              <p>{{ dataForm.isHaveHomework }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="作业是否完成"
                          prop="isCompletedHomework">
              <p>{{ dataForm.isCompletedHomework }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否评分"
                          prop="isHaveStar">
              <p>{{ dataForm.isHaveStar }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否完成评分"
                          prop="isCompletedStar">
              <p>{{ dataForm.isCompletedStar }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="我的评分"
                          prop="myStar">
              <p>{{ dataForm.myStar }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="修改时间"
                          prop="lastModifyTime">
              <p>{{ dataForm.lastModifyTime }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否有问卷"
                          prop="isHaveQuestionnaire">
              <p>{{ dataForm.isHaveQuestionnaire }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否完成问卷"
                          prop="isCompletedQuestionnaire">
              <p>{{ dataForm.isCompletedQuestionnaire }}</p>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label-width="0">
              <div class="jsbos-common-title">
                <h2>设计子表</h2>
              </div>
              <el-table :data="dataForm.temscoursestudychapterList" size='mini'>
                <el-table-column type="index" width="50" label="序号" align="center"/>
                <el-table-column prop="process" label="章节学习进度">
                  <template slot-scope="scope">
                    <p>{{ scope.row.process }}</p>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </template>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">          取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from '@/utils/request'
import PrintBrowse from '@/components/print-browse'

export default {
  components: {PrintBrowse},
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: '',
      dataForm: {
        id: '',
        process: '',
        enabledMark: "0",
        isHaveExam: 0,
        isCompletedExam: 0,
        isHaveHomework: 0,
        isCompletedHomework: 0,
        isHaveStar: 0,
        isCompletedStar: 0,
        myStar: '',
        lastModifyTime: "",
        isHaveQuestionnaire: 0,
        isCompletedQuestionnaire: 0,
        temscoursestudychapterList: [],
        tems_course:
          {
            cover: '',
            name: '',
            starScore: '',
            starUsers: '',
            learnUsers: '',
            favoriteCount: '',
            teacher: '',
          },
        jsbos_tems_course_jsbos_cover: '',
        jsbos_tems_course_jsbos_name: '',
        jsbos_tems_course_jsbos_starScore: '',
        jsbos_tems_course_jsbos_starUsers: '',
        jsbos_tems_course_jsbos_learnUsers: '',
        jsbos_tems_course_jsbos_favoriteCount: '',
        jsbos_tems_course_jsbos_teacher: '',
      },
      enabledMarkOptions: [{"fullName": "已完成", "id": "1"}, {"fullName": "未完成", "id": "0"}],

    }
  },
  computed: {},
  watch: {},
  created() {

  },
  mounted() {
  },
  methods: {
    dataInfo(dataAll) {
      let _dataAll = dataAll
      _dataAll.jsbos_tems_course_jsbos_cover = _dataAll.jsbos_tems_course_jsbos_cover ? JSON.parse(_dataAll.tems_course.cover) : []
      _dataAll.jsbos_tems_course_jsbos_name = _dataAll.tems_course.name
      _dataAll.jsbos_tems_course_jsbos_starScore = _dataAll.tems_course.starScore
      _dataAll.jsbos_tems_course_jsbos_starUsers = _dataAll.tems_course.starUsers
      _dataAll.jsbos_tems_course_jsbos_learnUsers = _dataAll.tems_course.learnUsers
      _dataAll.jsbos_tems_course_jsbos_favoriteCount = _dataAll.tems_course.favoriteCount
      _dataAll.jsbos_tems_course_jsbos_teacher = _dataAll.tems_course.teacher
      for (let i = 0; i < _dataAll.temscoursestudychapterList.length; i++) {
        var _list = _dataAll.temscoursestudychapterList[i];
      }
      this.dataForm = _dataAll
    },

    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/course/TemsCourseStudy/detail/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          })
        }

      })
    },
  },
}

</script>
